@import "effect/ripple";
@import "effect/shadow";

.md-button {
  position: relative;
  cursor: pointer;
  border: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
  // 下面两个一起用, 在下方有6px的空隙, FIXME
  //display: inline-block;
  //overflow:hidden;
  display: inline-table;
  overflow: hidden;

  &:focus {
    outline: none;
  }

  &.is-disabled {
    cursor: not-allowed;
  }

  &.is-link-button {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
  }

  .md-button-label {
    position: relative;
    padding: 0 16px;
    line-height: @button-height;
    color: inherit;
  }
}

// 可以触发涟漪效果的

.ripple-button {
  position: relative;
  overflow: hidden;
}

// Flat Button
.flat-button {
  .ease-out();
  .font-style-button;
  border-radius: 2px;
  background-color: @flat-button-color;
  color: @flat-button-text-color;
  min-width: @button-min-width;

  .touch-ripple {
    background: @flat-button-ripple-color;
  }

  .focus-ripple {
    background: @flat-button-focus-ripple-color;
  }

  &:hover,
  &.is-focus {
    background-color: @flat-button-hover-color;
  }

  &.is-disabled {
    color: @flat-button-disabled-text-color;
    background-color: inherit;
  }

  &.is-primary {
    color: @flat-button-primary-text-color;

    &:hover,
    &.is-focus {
      background-color: @flat-button-primary-hover-color;
    }

    .touch-ripple {
      background: @flat-button-primary-ripple-color;
    }

    .focus-ripple {
      background: @flat-button-primary-focus-ripple-color;
    }
  }

  &.is-secondary {
    color: @flat-button-secondary-text-color;

    &:hover,
    &.is-focus {
      background-color: @flat-button-secondary-hover-color;
    }

    .touch-ripple {
      background: @flat-button-secondary-ripple-color;
    }

    .focus-ripple {
      background: @flat-button-secondary-focus-ripple-color;
    }
  }
}

// Raised Button
.raised-button {
  .ease-out();
  .font-style-button;
  border-radius: 2px;
  min-width: @button-min-width;
  background-color: inherit;
  color: inherit;
  box-shadow: @zd1-shadow;
  .ease-out();

  .touch-ripple {
    background: @raised-button-primary-ripple-color;
  }

  .focus-ripple {
    background: @raised-button-focus-ripple-color;
  }

  &:hover,
  &.is-focus {
    background-color: @raised-button-hover-color;
    box-shadow: @zd2-shadow;
  }

  &.is-disabled {
    color: @raised-button-disabled-text-color;
    background-color: @raised-button-disabled-color;
    box-shadow: none;
  }

  &.is-primary {
    color: @raised-button-primary-text-color;
    background-color: @raised-button-primary-color;

    &:hover,
    &.is-focus {
      background-color: @raised-button-primary-hover-color;
    }

    .touch-ripple {
      background: @raised-button-primary-ripple-color;
    }

    .focus-ripple {
      background: @raised-button-primary-focus-ripple-color;
    }
  }

  &.is-secondary {
    color: @raised-button-secondary-text-color;
    background-color: @raised-button-secondary-color;

    &:hover,
    &.is-focus {
      background-color: @raised-button-secondary-hover-color;
    }

    .touch-ripple {
      background: @raised-button-secondary-ripple-color;
    }

    .focus-ripple {
      background: @raised-button-secondary-focus-ripple-color;
    }
  }

}

// floating-action button

@md-fab-size: 56px;
@md-fab-mini-size: 40px;
@md-fab-zi: 5000;
@md-fab-mini-zi: -1;
@fab-mini-start: -8px;
@fab-mini-outsize: @md-fab-mini-size + 20;

.fab-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  z-index: @md-fab-zi;
  width: @md-fab-size;
  height: @md-fab-size;
  border: none;
  padding: 0;
  margin: 0;
  background: @transparent;
  display: block;
  overflow: initial;
  .ease-out();

  & i.md-icon {
    .ease-out();
    .user-transform(rotate(0deg));
  }

  &.open {

    & i.md-icon {
      .user-transform(rotate(135deg));
    }

    & ul {

      &.top {

        // 向上
        .generate-li(@i) when (@i > 0) {
          li.fab-pos-@{i} {
            @ms: @fab-mini-start - @fab-mini-outsize * @i;
            .user-transform(@ts: translate3d(0, @ms, 0));
          }
          .generate-li(@i - 1); // next iteration
        }

        .generate-li(12);

      }

      &.bottom {

        // 向上
        .generate-li(@i) when (@i > 0) {
          li.fab-pos-@{i} {
            @ms: @fab-mini-start - @fab-mini-outsize * @i;
            .user-transform(@ts: translate3d(0, -@ms, 0));
          }
          .generate-li(@i - 1); // next iteration
        }

        .generate-li(12);

      }

      &.left {

        li {
          .ease-out();
        }

        // 向左
        .generate-li(@i) when (@i > 0) {
          li.fab-pos-@{i} {
            @ms: @fab-mini-start - @fab-mini-outsize * @i;
            .user-transform(@ts: translate3d(@ms, 0, 0));
          }
          .generate-li(@i - 1); // next iteration
        }

        .generate-li(12);

      }

      &.right {

        li {
          .ease-out();
        }

        // 向右
        .generate-li(@i) when (@i > 0) {
          li.fab-pos-@{i} {
            @ms: @fab-mini-start - @fab-mini-outsize * @i;
            .user-transform(@ts: translate3d(-@ms, 0, 0));
          }
          .generate-li(@i - 1); // next iteration
        }

        .generate-li(12);

      }
    }
  }

  & > .fab-button-inner {
    background: @accent-1-color;
    color: @white;
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    padding: 16px;
    box-shadow: @zd3-shadow;
    cursor: pointer;
    .ease-out();

    &:hover,
    &.is-focus {
      background-color: darken(@accent-1-color, 8%);
      box-shadow: @zd5-shadow;
    }

    .touch-ripple {
      background: @raised-button-secondary-ripple-color;
    }

  }

  ul {
    position: absolute;
    z-index: @md-fab-mini-zi;
    top: 8px;
    left: 8px;

    li {
      position: absolute;
      top: 0;
      left: 0;
      .ease-out();
    }

  }
}

.fab-button-mini {
  .fab-button;
  width: @md-fab-mini-size;
  height: @md-fab-mini-size;

  & > .fab-button-inner {
    background: @accent-1-color;
    color: @white;
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    padding: 8px;
    box-shadow: @zd3-shadow;
    cursor: pointer;
    .ease-out();

    &:hover,
    &.is-focus {
      background-color: darken(@accent-1-color, 8%);
      box-shadow: @zd5-shadow;
    }

    .touch-ripple {
      background: @raised-button-secondary-ripple-color;
    }
  }

}
